import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import left from './left.png';
import fenxiang from './fenxiang.png';
import song from './song.png';
import touxiang from './touxiang.jpeg';
class App extends React.Component{
  state={
    comments:[
      {id:1,name:'一个普通到不能再普通的人',time:'11月06日',comment:'反正翻不到我！'},
      {id:2,name:'一个普通到不能再普通的人',time:'11月06日',comment:'反正翻不到我！'},
      {id:3,name:'一个普通到不能再普通的人',time:'11月06日',comment:'反正翻不到我！'},
      {id:4,name:'一个普通到不能再普通的人',time:'11月06日',comment:'反正翻不到我！'},
      {id:5,name:'一个普通到不能再普通的人',time:'11月06日',comment:'反正翻不到我！'}
    ]
  }
  
  //渲染评论列表
  readerList(){
    return (
      <div className="comment-items">
        {
          this.state.comments.map(item=>(
            <div className="comment-item" key={item.id}>
              <img src={touxiang} alt=""></img>
              <div className="auther">
                <span>{item.name}</span>
              <br></br>
              <span className="date-box">{item.time}</span>
              </div>
              <div className="con">
                <p>{item.comment}</p>
              </div>
            </div>
          ))
          
        }
            
            
          </div>
    )
  }
  handleForm=(e)=>{
    const {name,value}=e.target
    this.setState({
      [name]:value
    })
  }
  //发表评论
  addComment=()=>{
    const {comment,comments}=this.state
    //非空校验
    if(comment===''){
      alert('评论内容不能为空！')
      return
    }else{
      const newComments=[{
      id:Math.random(),
      name:'一个普通到不能再普通的人',
      time:'11月06日',
      comment:comment
    },...comments]
    this.setState({
      comments:newComments,
      comment:''

    })
    }
    
  }
  render(){
    return(
      <div className="app">
        <div className="top">
          <img src={left} alt=""/>
          <span>评论（7023）</span>
          <img className="share" src={fenxiang} alt=""/>
        </div>
        <div className="main">
          <div className="main-top">
            <img src={song} alt=""/>
          <div className="songer">
            <span>热爱105°C的你</span>
            <p>阿肆</p>
          </div>
          </div>
          
          <div className="main-bottom">
            <span className="left">阿肆的云圈</span><span className="right">27.2万成员已加入</span>
          </div> 
        </div>

        {/* 评论区 */}
        <div className="comment-box">
          <div className="comment-top">
            <p>评论区</p>
          </div>
          {this.readerList()}
        </div>

        <div className="input-box">
          <input type="text" placeholder="这一次也许就是你上热评了" value={this.state.comment} name="comment" onChange={this.handleForm}></input>
          <span onClick={this.addComment}>发送</span>
        </div>
        
      </div>
    )
  }
}
ReactDOM.render(<App></App>,document.getElementById('root'))